<template>
    <inner-layout v-loading="loading">
        <template slot="header">
            <el-button
                type="primary"
                v-permission="['member-add']"
                @click="openFormPanel('')"
            >添加</el-button>
        </template>

        <div class="filter-bar clearfix">
            <div class="filter-item">
                <span>状态：</span>
                <el-select v-model="apiParams.status" placeholder="请选择" @change="filterData">
                    <el-option
                      v-for="item in statusList"
                      :key="item.id"
                      :label="item.name"
                      :value="item.id">
                    </el-option>
                </el-select>
            </div>

            <div class="filter-item">
                <span class="filter-title">姓名：</span>
                <el-input
                    v-model="apiParams.name"
                    placeholder="按回车搜索"
                    style="width: 150px;"
                    clearable
                    @keyup.13.native="filterData"
                />
            </div>

            <div class="filter-item">
                <span class="filter-title">手机号：</span>
                <el-input
                    v-model="apiParams.phone"
                    placeholder="按回车搜索"
                    style="width: 150px;"
                    clearable
                    @keyup.13.native="filterData"
                />
            </div>

            <div class="inline-block-fr">
                <!-- <div class="filter-item">
                    <span class="filter-title">关键字搜索：</span>
                    <el-input
                        v-model="apiParams.keyword"
                        placeholder="输入关键字按回车搜索"
                        style="width: 200px;"
                        prefix-icon="el-icon-search"
                        clearable
                        @keyup.13.native="filterData"
                    />
                </div> -->
                <div class="filter-item">
                    <el-button @click="reset">重置</el-button>
                </div>
            </div>
        </div>

        <el-table :data="dataList">
            <el-table-column
                label="ID"
                prop="id"
                width="100"
            />
            <el-table-column
                label="姓名"
                prop="name"
            />
            <el-table-column
                label="联系电话"
                prop="phone"
            />
            <el-table-column label="状态">
                <template v-slot="{row}">
                    <el-tag
                        v-if="row.status === 1"
                        type="success"
                    >启用</el-tag>
                    <el-tag
                        v-else
                        type="danger"
                    >禁用</el-tag>
                </template>
            </el-table-column>
            <!-- <el-table-column label="创建时间">
                <template v-slot="{row}">
                    {{row.created | parseTime}}
                </template>
            </el-table-column> -->
            <el-table-column label="操作">
                <template v-slot="{ row }">
                    <div class="handle-btns">
                        <el-button
                            type="primary"
                            size="small"
                            icon="el-icon-edit"
                            @click="openFormPanel(row.id)"
                        />
                        <el-button
                            type="danger"
                            size="small"
                            icon="el-icon-delete"
                            v-permission="['member-delete']"
                            @click="deleteItem(row,deleteUser)"
                        />
                    </div>
                </template>
            </el-table-column>
        </el-table>

        <el-pagination
            :current-page.sync="apiParams.pageNo"
            :page-sizes="[10, 20, 50, 100]"
            :page-size.sync="apiParams.pageSize"
            :total="rowTotal"
            layout="total, sizes, prev, pager, next, jumper"
            @size-change="filterData"
            @current-change="getPageData"
        />

        <form-panel size="800px" v-model="formPanelVisible">
            <template v-slot="{ closeDrawer, getIsChangeFormData }">
                <user-detail
                    :id="itemId"
                    @getIsChangeFormData="getIsChangeFormData"
                    @closeDrawer="closeDrawer"
                    @getPageData="getPageData"
                />
            </template>
        </form-panel>
    </inner-layout>
</template>

<script>
import { getUserList, deleteUser } from '@/api/user'
import permission from "@/directive/permission/index.js"
import filterList from '@/mixins/filterList'
import changeListItem from '@/mixins/changeListItem'
import UserDetail from './userDetail.vue'
export default {
	name: 'UserList',
	components: { UserDetail },
    directives: { permission },
	mixins: [filterList, changeListItem],
	data() {
		return {
			loading: false,
			apiParams: {
				pageNo: 1,
				pageSize: 10
				// keyword: '',
				// status: ''
			},
			rowTotal: 0,
			dataList: [],
			itemId: '',
			formPanelVisible: false
		}
	},
	created() {
		this.getPageData()
	},
	methods: {
        deleteUser,
		getPageData() {
			let params = {}
			for (let key in this.apiParams) {
				if (this.apiParams[key] !== '') {
					params[key] = this.apiParams[key]
				}
			}
			this.loading = true
			getUserList(params).then((res) => {
				this.dataList = res.data.data
				this.rowTotal = res.data.rowTotal
				this.loading = false
			})
		},
		openFormPanel(id = '') {
			this.formPanelVisible = true
			this.itemId = id
		}
	}
}
</script>

<style lang="scss" scoped>
</style>
